<script lang="ts" setup>
import { ref } from 'vue'
const tabs=ref([
    {
        label:"理论",
    },
    {
        label:"拍摄",
    },
    {
        label:"赚钱",
    },
    {
        label:"服务",
    },
    {
        label:"售后",
    }
])
const current = ref<number>(0)
const hoverItemContent = ref<string>('产品描述100字 这款产品是一款高性能的智能手机,拥有强大的处理能力和流畅的操作体验。它采用了最新的技术和设计,拥有精美的外观和轻巧的手感。配备了高清摄像头和大屏幕,能够拍摄出清晰锐利的照片和视频。同时,它还支持快速充电和长久续航,让用户无忧使用。此外,它还内置了丰富的应用程序和功能,可以满足用户的各种...')
const mouserOver = (item:any,index?:number)=>{
    current.value = index
    hoverItemContent.value = item.label
}
</script>

<template>
    <div>
        <el-carousel
            motion-blur
            :autoplay="false"
            style="background: #eee;">
                <el-carousel-item >
                    <img src="https://s1.xiaomiev.com/activity-outer-assets/0328/images/su7/su7_1.jpg?" alt="" class="width100 height100">
                </el-carousel-item>
                <el-carousel-item >
                    <img src="https://s1.xiaomiev.com/activity-outer-assets/0328/images/su7/su7_3.jpg?" alt="" class="width100 height100">
                </el-carousel-item>
                <el-carousel-item >
                    <img src="https://s1.xiaomiev.com/activity-outer-assets/0328/images/su7/su7_2.png?" alt="" class="width100 height100">
                </el-carousel-item>
                <el-carousel-item >
                    <img src="https://s1.xiaomiev.com/activity-outer-assets/0328/images/su7/su7_6_1.jpg?" alt="" class="width100 height100">
                </el-carousel-item>
        </el-carousel>
        <div class="content">
                <div class="tab flex-start gap30">
                    <div class="tabItem cursor" :class="current==index?'active':''" @mouseover="mouserOver(item)" @click="mouserOver(item,index)" v-for="item,index of tabs" :key="index">{{ item.label }}</div>
                </div>
                <div class="components between ">
                    <div class="descConten between">
                        <img src="https://img0.baidu.com/it/u=2813646527,1969343241&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1719162000&t=157199f7087aea5fee17870bd7814c20" alt="" class="img">
                        <div class="msgBox flex ">
                            
                          {{ hoverItemContent }}
                        </div>
                    </div>
                </div>
            </div>
    </div>
</template>

<style lang="scss" scoped>
     @import './index.scss';
</style>